import styled from "styled-components";

import leftJiantouTitle from '../../../../assets/image/ConfigManagement/left_jiantou_title.png'
import rightJiantouTitle from '../../../../assets/image/ConfigManagement/right_jiantou_title.png'
import dicItemBg from '../../../../assets/image/ConfigManagement/dic-item-bg.png'


export const DicManagedEventBox = styled.div`
    
`

export const RolePageHeaderBox = styled.div`
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3rem;
    .left{
        display: flex;
        align-items: center;
        font-weight: 500;
        font-size: 1.8rem;
        color: #87B9DE;
        .left_left_jiantou{
            width: 14px;
            height: 20px;
            background: url(${leftJiantouTitle});
            background-size: 100% 100%;
            margin-right: 1rem;

        }
        .left_right_jiantou{
            width: 14px;
            height: 20px;
            background: url(${rightJiantouTitle});
            background-size: 100% 100%;
            margin-left: 1rem;

        }

    }
    .right{
        display: flex;
        align-items: center;
    }
`

export const DicManagemedEventUl = styled.div`
    display: flex;
    flex-wrap: wrap;
    padding: 0 1rem 0 3rem;
    margin-bottom: 3rem;
`
export const DicManagemedEventItem = styled.div`
    background: url(${dicItemBg});
    background-size: 100% 100%;
    width: 29.2rem;
    height: 12rem;
    margin-bottom: 1rem;
    margin-right: 2rem;
    .title{
        height: 4rem;
        padding-left: 4.2rem;
        padding-right: 2rem;
        line-height: 4rem;
        font-weight: normal;
        font-size: 1.8rem;
        color: #DCECFE;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .close_style{
            color: #73AAAB;
            cursor: pointer;
        }
    }
    .button_box{
        height: 8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        .button_enter{
            width: 8.8rem;
            height: 3rem;
            background: rgba(56,169,255,0.21);
            border-radius: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: normal;
            font-size: 1.4rem;
            color: #BDDFF2;
            cursor: pointer;
        }
    }
    .left {
        margin-right: 2rem;
    }
`